<template>
    <div>
        <el-dialog class="zczyYhChange" title="中压注册用户变更" :visible.sync="show" v-if="show" width="70%" :before-close="handleCancel" :close-on-click-modal="false" top="8vh" v-dialogDrag>
            <el-scrollbar :style="'height:'+screenHeight+'px;'">
                <el-form :model="newForm" ref="newForm" :rules="newFormRules" label-width="140px" size="mini">
                    <el-row>
                        <el-col :span="11">
                            <div class="title">变更前</div>
                            <el-form-item label="原线段编码">
                                <el-input v-model="oldForm.xdbm" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="原线段名称">
                                <el-input v-model="oldForm.xdmc" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="原用户编码">
                                <el-input v-model="oldForm.yhbm" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="原用户名称">
                                <el-input v-model="oldForm.yhmc" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="原变压器台数">
                                <el-input v-model="oldForm.bts" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="原变压器容量">
                                <el-input v-model="oldForm.brl" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="原专用设备台数">
                                <el-input v-model="oldForm.zysbs" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="原专用设备容量">
                                <el-input v-model="oldForm.zysbr" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="原地区特征">
                                <el-input v-model="oldForm.dqtz" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="原规划特征">
                                <el-input v-model="oldForm.ghtz" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="原行政区划">
                                <el-input v-model="oldForm.xzqh" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="原用户性质">
                                <el-input v-model="oldForm.yhxz" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2" class="center"></el-col>
                        <el-col :span="11">
                            <div class="title">变更后</div>
                            <el-form-item label="新线段编码" prop="xdbm">
                                <el-row>
                                    <el-col :span="16">
                                        <el-input v-model="newForm.xdbm" disabled></el-input>
                                    </el-col>
                                    <el-col :span="8" class="selectXdbm">
                                        <el-button type="primary" @click="selectXdbm">选择</el-button>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                            <el-form-item label="新线段名称">
                                <el-input v-model="newForm.xdmc" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="新用户编码" prop="nextyhbm">
                                <el-row>
                                    <el-col :span="10"><el-input v-model="preyhbm" disabled></el-input></el-col>
                                    <el-col :span="1" class="center"></el-col>
                                    <el-col :span="13"><el-input v-model="newForm.nextyhbm"></el-input></el-col>
                                </el-row>
                            </el-form-item>
                            <el-form-item label="新用户名称"  prop="yhmc">
                                <el-input v-model="newForm.yhmc"></el-input>
                            </el-form-item>
                            <el-form-item label="新变压器台数"  prop="bts">
                                <el-input v-model="newForm.bts" :disabled="newForm.yhxzm != '2'"></el-input>
                            </el-form-item>
                            <el-form-item label="新变压器容量"  prop="brl">
                                <el-input v-model="newForm.brl"></el-input>
                            </el-form-item>
                            <el-form-item label="新专用设备台数"  prop="zysbs">
                                <el-input v-model="newForm.zysbs" :disabled="newForm.yhxzm != '2'"></el-input>
                            </el-form-item>
                            <el-form-item label="新专用设备容量"  prop="zysbr">
                                <el-input v-model="newForm.zysbr" :disabled="newForm.yhxzm != '2' || newForm.zysbs == '0'"></el-input>
                            </el-form-item>
                            <el-form-item label="新地区特征"  prop="dqtzm">
                                <el-select v-model="newForm.dqtzm" placeholder="请选择" @change="dqtzChange">
                                    <el-option v-for="item in dqtzOptions" :key="item.value" :label="item.text" :value="item.value">
                                        <span class="txt">{{ item.text }}</span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="原规划特征"  prop="ghtz">
                                <el-select v-model="newForm.ghtz" placeholder="请选择">
                                    <el-option v-for="item in ghtzOptions" :key="item.value" :label="item.text" :value="item.value">
                                        <span class="txt">{{ item.text }}</span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="新行政区划"  prop="xzqh">
                                <el-row>
                                    <el-col :span="16">
                                        <el-input v-model="newForm.xzqh" disabled></el-input>
                                    </el-col>
                                    <el-col :span="8" class="selectXzqh">
                                        <el-button type="primary" @click="selectXzqh">选择</el-button>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                            <el-form-item label="新用户性质" prop="yhxzm">
                                <el-select v-model="newForm.yhxzm" placeholder="请选择" @change="yhxzChange">
                                    <el-option v-for="item in yhxzOptions" :key="item.value" :label="item.text" :value="item.value">
                                        <span class="txt">{{ item.text }}</span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="变更日期" prop="zcrq">
                                <el-date-picker v-model="newForm.zcrq" type="date" :picker-options="pickerDate" value-format="yyyy-MM-dd" placeholder="请选择" :clearable="false"></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-scrollbar>
            <div slot="footer" class="dialog-footer">
                <el-button size="medium" @click="handleCancel">取 消</el-button>
                <el-button size="medium" type="primary" @click="handleSubmit">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 选择行政区划 -->
        <GetXzqh ref="getXzqhRef" @handleGetXzqh="handleGetXzqh"></GetXzqh>
        <!-- 选择线段编码 -->
        <GetXdbm ref="getXdbmRef" @handleGetXdbm="handleGetXdbm"></GetXdbm>
    </div>
</template>
<script>
import { changeZczyYh, checkZczyYhbmmc } from '@/api/sjwh/zczy.js';
import { checkSpecialKey, DateDifference } from '@/utils/validate.js';
import { getDictCombo } from '@/api/tools/dict.js';
import { currentDate, getPreDate } from '@/utils/moment.js';
import GetXzqh from "@/dialogCommom/GetXzqh";
import GetXdbm from "@/dialogCommom/GetXdbm";
export default {
    data() {
        const that = this
        // 用户编码验证
        const checkYhbm = (rule, value, callback) => {
          if (value) {
            if (checkSpecialKey(value)) {
                let yhbm = that.preyhbm + that.newForm.nextyhbm
                let vo = {
                    dwbm: that.newForm.dwbm,
                    yhbm: yhbm,
                    zcrq: that.newForm.zcrq,
                    oid: that.newForm.id
                }
                checkZczyYhbmmc(vo).then(res => {
                    if (res.code == 0 && res.data) {
                        callback()
                    } else {
                        callback('用户编码重复')
                    }
                })
            } else {
                callback('禁止输入特殊字符')
            }
          } else {
            callback('请输入用户编码')
          }         
        }
        // 用户名称验证
        const checkYhmc = (rule, value, callback) => {
            if (value) {
                if (checkSpecialKey(value)) {
                    let vo = {
                        dwbm: that.newForm.dwbm,
                        yhmc: that.newForm.yhmc,
                        zcrq: that.newForm.zcrq,
                        oid: that.newForm.id
                    }
                    checkZczyYhbmmc(vo).then(res => {
                        if (res.code == 0 && res.data) {
                            that.yhmcRepeat = false
                        } else {
                            that.yhmcRepeat = true
                        }
                        callback()
                    })
                } else {
                    callback('禁止输入特殊字符')
                }
            } else {
                callback('请输入用户名称')
            }
        }
        /* 变容器容量验证 */
        const checkBrl = (rule, value, callback) => {
            let val = value + ''
            if (val) {
                if (/^([1-9]{1})([0-9]{0,9})$/.test(val)) {
                    callback()
                } else {
                    callback('1~10位数字且不能为0')
                }
            } else {
                callback('请输入变压器容量')
            }
        }
        /* 变压器台数验证 */
        const checkBts = (rule, value, callback) => {
            if (that.newForm.yhxzm == '1') {
                callback()
            } else {
                let val = value + ''
                if (val) {
                    if (/^([1-9]{1})([0-9]{0,3})$/.test(val)) {
                        callback()
                    } else {
                        callback('1~4位数字且不能为0')
                    }
                } else {
                    callback('请输入变容器台数')
                }
            }            
        }
        /* 专用设备容量验证 */
        const checkZysbr = (rule, value, callback) => {
            if (that.newForm.yhxzm == '2') {
                let val = value + ''
                if (val) {
                    if (/(^([1-9]{1})([0-9]{0,9})$)|(^0$)/.test(val)) {
                        if (that.newForm.zysbs != '0') {
                            if (val == '0') {
                                callback('1~10位数字且不能为0')
                            } else {
                                callback()
                            }
                        } else {
                            callback()
                        }
                    } else {
                        callback('1~10位数字且首位数不为0')
                    }
                } else {
                    callback('请输入专用设备容量')
                }
            } else {
                callback()
            }            
        }
        /* 专用设备台数验证 */
        const checkZysbs = (rule, value, callback) => {
            if (that.newForm.yhxzm == '2') {
                let val = value + ''
                if (val) {
                    if (/(^([1-9]{1})([0-9]{0,3})$)|(^0$)/.test(val)) {
                        if (val == '0') {
                            that.newForm.zysbr = '0'
                        }
                        callback()
                    } else {
                        callback('1~4位数字且首位数不为0')
                    }
                } else {
                    callback('请输入专用设备台数')
                }
            } else {
                callback()
            }            
        }
        const checkZcrq = (rule, value, callback) => {
          if (value) {
            if (DateDifference(value, that.oldForm.zcrq) < 2) {
                callback(`用户的变更日期须大于其注册日期(${that.oldForm.zcrq})2日`)
            } else {
                callback()
            }
          } else {
            callback('请选择变更日期')
          }         
        }
        return {
          show: false,
          oldForm: {
            xdbm: '',
            xdmc: '',
            yhbm: '',
            yhmc: '',
            bts: '',
            brl: '',
            zysbs: '',
            zysbr: '',
            dqtz: '',
            ghtz: '',
            xzqh: '',
            yhxz: '',
            zcrq: ''
          },
          newForm: {
            xdbm: '',
            xdmc: '',
            yhbm: '',
            yhmc: '',
            bts: '',
            brl: '',
            zysbs: '',
            zysbr: '',
            dqtz: '',
            dqtzm: '',
            ghtz: '',
            xzqh: '',
            xzqhm: '',
            yhxz: '',
            yhxzm: '',
            zcrq: '',
            czy: '',
            dwbm: '',
            id: '',
            xdId: '',
            zrl: '',
            nextyhbm: '' // 用户编码自由编辑部分
          },
          newFormRules: {
            xdbm: [
                { required: true, message: '请选择新线段编码', trigger: 'blur' }
            ],
            nextyhbm: [
                { required: true, validator: checkYhbm, trigger: 'blur'},
            ],
            yhmc: [
                { required: true, validator: checkYhmc, trigger: 'blur'},
            ],
            bts: [
                { validator: checkBts, trigger: 'blur' }
            ],
            brl: [
                { validator: checkBrl, trigger: 'blur' }
            ],
            zysbs: [
                { validator: checkZysbs, trigger: 'change' }
            ],
            zysbr: [
                { validator: checkZysbr, trigger: 'blur' }
            ],
            dqtzm: [
                { required: true, message: '请选择地区特征', trigger: 'blur' }
            ],
            ghtz: [
                { required: true, message: '请选择规划特征', trigger: 'blur' }
            ],
            xzqh: [
                { required: true, message: '请选择行政区划', trigger: 'blur' }
            ],
            yhxzm: [
                { required: true, message: '请选择用户性质', trigger: 'blur' }
            ],
            zcrq: [
                { required: true, validator: checkZcrq, trigger: 'blur' }
            ]
          },
          changeForm: {
            zcZyyhsj: null,
            yxZytdyhValidYhZxrqVO: {
              dwbm: '',
              yhId: [],
              zxrq: ''
            }
          },
          dqtzDict: 'dict_dqtz', // 地区特征字典分类值
          ghtzDict: 'dict_ghtz', // 规划特征字典分类值
          yhxzDict: 'dict_yhxz', // 用户性质字典分类值
          dqtzOptions: [], // 地区特征下拉框数据
          ghtzOptions: [], // 规划特征下拉框数据
          yhxzOptions: [], // 用户性质下拉框数据
          screenHeight: 0, // 屏幕高度
          yhmcRepeat: false, // 用户名称是否重复
          pickerDate: { // 变更日期选择不能超过当前日期
            disabledDate: time => {
                return (
                    time.getTime() > new Date()
                );
            }
          }
        }
    },
    props: {
      propChangeData: {
        type: Object,
        default: function() {
          return {};
        }
      }
    },
    watch: {
      propChangeData: {
        deep: true,
        handler(newVal, oldVal) {
          if (newVal.show) {
            const that = this
            that.show = newVal.show
            let nextyhbm = newVal.obj.yhbm.substring(5)
            that.oldForm = {
                xdbm: newVal.obj.xdbm,
                xdmc: newVal.obj.xdmc,
                yhbm: newVal.obj.yhbm,
                yhmc: newVal.obj.yhmc,
                bts: newVal.obj.bts,
                brl: newVal.obj.brl,
                zysbs: newVal.obj.zysbs,
                zysbr: newVal.obj.zysbr,
                dqtz: newVal.obj.dqtz,
                ghtz: newVal.obj.ghtz,
                xzqh: newVal.obj.xzqh,
                yhxz: newVal.obj.yhxz,
                zcrq: newVal.obj.zcrq
            }
            that.newForm = {
                xdbm: newVal.obj.xdbm,
                xdmc: newVal.obj.xdmc,
                yhbm: newVal.obj.yhbm,
                yhmc: newVal.obj.yhmc,
                bts: newVal.obj.bts,
                brl: newVal.obj.brl,
                zysbs: newVal.obj.zysbs,
                zysbr: newVal.obj.zysbr,
                dqtz: newVal.obj.dqtz,
                dqtzm: newVal.obj.dqtzm,
                ghtz: newVal.obj.ghtz,
                xzqh: newVal.obj.xzqh,
                xzqhm: newVal.obj.xzqhm,
                yhxz: newVal.obj.yhxz,
                yhxzm: newVal.obj.yhxzm,
                czy: newVal.obj.czy,
                zcrq: currentDate(),
                dwbm: newVal.obj.dwbm,
                id: newVal.obj.id,
                xdId: newVal.obj.xdId,
                zrl: newVal.obj.zrl,
                nextyhbm: nextyhbm
            }
            that.changeForm.yxZytdyhValidYhZxrqVO.dwbm = newVal.obj.dwbm
            that.changeForm.yxZytdyhValidYhZxrqVO.yhId = [newVal.obj.id]
          }
        }
      }
    },
    computed: {
        preyhbm() {
            const that = this
            if (that.newForm.yhbm) {
                return that.newForm.yhbm.substring(0,5)
            } else {
                return ''
            }
        },
        zrl() {
            const that = this
            let zrl = 0
            if (that.newForm.brl) {
                zrl = zrl + parseInt(that.newForm.brl, 10)
            }
            if (that.newForm.zysbr) {
                zrl = zrl + parseInt(that.newForm.zysbr, 10)
            }
            return zrl
        },
        brl2000() {
            const that = this
            let zrl = 0
            let number = 0
            if (that.newForm.brl) {
                zrl = zrl + parseInt(that.newForm.brl, 10)
            }
            if (that.newForm.zysbr) {
                zrl = zrl + parseInt(that.newForm.zysbr, 10)
            }
            if (that.newForm.bts) {
                number = number + parseInt(that.newForm.bts, 10)
            }
            if (that.newForm.zysbs) {
                number = number + parseInt(that.newForm.zysbs, 10)
            }
            number = number * 2000
            if (zrl > number) {
                return true
            } else {
                return false
            }
        }
    },
    mounted() {
        const that = this
        let pam1 = {typeCode: that.yhxzDict}
        let pam2 = {typeCode: that.dqtzDict}
        let pam3 = {typeCode: that.ghtzDict}
        let res1 = getDictCombo(pam1)
        let res2 = getDictCombo(pam2)
        let res3 = getDictCombo(pam3)
        Promise.all([res1, res2, res3]).then(result => {
            that.yhxzOptions = result[0].data
            that.dqtzOptions = result[1].data
            that.ghtzOptions = result[2].data
        }).catch(reason => {
            console.log(reason)
        })
        that.screenHeight = (document.documentElement.clientHeight || document.body.clientHeight) * 0.6
        window.addEventListener('resize', that.onResize)
    },
    beforeDestroy() {
        window.removeEventListener("resize", this.onResize)
    },
    components: {
      GetXzqh,
      GetXdbm
    },
    methods: {
      /* 取消 */
      handleCancel() {
        const that = this
        that.show = false
        that.oldForm = {
            xdbm: '',
            xdmc: '',
            yhbm: '',
            yhmc: '',
            bts: '',
            brl: '',
            zysbs: '',
            zysbr: '',
            dqtz: '',
            ghtz: '',
            xzqh: '',
            yhxz: '',
            zcrq: ''
        }
        that.newForm = {
            xdbm: '',
            xdmc: '',
            yhbm: '',
            yhmc: '',
            bts: '',
            brl: '',
            zysbs: '',
            zysbr: '',
            dqtz: '',
            dqtzm: '',
            ghtz: '',
            xzqh: '',
            xzqhm: '',
            yhxz: '',
            yhxzm: '',
            zcrq: '',
            czy: '',
            dwbm: '',
            id: '',
            xdId: '',
            zrl: '',
            nextyhbm: ''
        }
        that.changeForm = {
            zcZyyhsj: null,
            yxZytdyhValidYhZxrqVO: {
                dwbm: '',
                yhId: [],
                zxrq: ''
            }
        }
      },

      /* 确定 */
      handleSubmit() {
        const that = this
        that.$refs['newForm'].validate(valid => {
            if (valid) {
                let obj1 = {
                    xdbm: that.oldForm.xdbm,
                    xdmc: that.oldForm.xdmc,
                    yhbm: that.oldForm.yhbm,
                    yhmc: that.oldForm.yhmc,
                    bts: that.oldForm.bts,
                    brl: that.oldForm.brl,
                    zysbs: that.oldForm.zysbs,
                    zysbr: that.oldForm.zysbr,
                    dqtz: that.oldForm.dqtz,
                    ghtz: that.oldForm.ghtz,
                    xzqh: that.oldForm.xzqh,
                    yhxz: that.oldForm.yhxz
                }
                let obj2 = {
                    xdbm: that.newForm.xdbm,
                    xdmc: that.newForm.xdmc,
                    yhbm: that.newForm.yhbm,
                    yhmc: that.newForm.yhmc,
                    bts: that.newForm.bts,
                    brl: that.newForm.brl,
                    zysbs: that.newForm.zysbs,
                    zysbr: that.newForm.zysbr,
                    dqtz: that.newForm.dqtz,
                    ghtz: that.newForm.ghtz,
                    xzqh: that.newForm.xzqh,
                    yhxz: that.newForm.yhxz
                }
                if (that.isObjEqual(obj1, obj2)) {
                    that.$message.warning('请至少变更一项数据')
                    return false
                }
                if (that.brl2000) {
                    that.$confirm('单台变压器容量超过2000kVA, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        that.yhmcConfirm()
                    }).catch(() => {
                        console.log('已取消')         
                    });
                } else {
                    that.yhmcConfirm()
                }
            }
        })
      },
      yhmcConfirm() {
        const that = this
        if (that.yhmcRepeat) {
            that.$confirm('用户名称重复, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                that.changeZczyYh()
            }).catch(() => {
                console.log('已取消')         
            });
        } else {
            that.changeZczyYh()
        }
      },
      async changeZczyYh() {
        const that = this
        that.newForm.yhbm = that.preyhbm + that.newForm.nextyhbm
        that.newForm.zrl = that.zrl
        that.changeForm.zcZyyhsj = that.newForm
        that.changeForm.yxZytdyhValidYhZxrqVO.zxrq = getPreDate(that.newForm.zcrq)
        let res = await changeZczyYh(that.changeForm)
        if (res.code == 0 && res.data) {
            that.$message.success('中压注册用户变更成功')
            that.handleCancel()
            that.$emit("updateZczyYhTable")
        } else {
            that.$message.error(res.message)
        }
      },
      isObjEqual(o1,o2){
        let props1 = Object.getOwnPropertyNames(o1)
        let props2 = Object.getOwnPropertyNames(o2)
        if (props1.length != props2.length) {
            return false
        }
        for (let i = 0, max = props1.length; i < max; i++) {
            let propName = props1[i]
            if (o1[propName] !== o2[propName]) {
                return false
            }
        }
        return true
      },

      /* 选择地区特征 */
        dqtzChange(val) {
            const that = this
            that.dqtzOptions.forEach(item => {
                if (item.value == val) {
                    that.newForm.dqtz = item.text
                }
            })
        },

        /* 选择用户性质 */
        yhxzChange(val) {
            const that = this
            that.yhxzOptions.forEach(item => {
                if (item.value == val) {
                    that.newForm.yhxz = item.text
                }
            })
            if (val == '1') {
                that.newForm.bts = '1'
                that.newForm.zysbr = '0'
                that.newForm.zysbs = '0'
            } else {
                that.newForm.bts = '0'
                that.newForm.dyyhs = '0'
            }
        },

        /* 选择行政区划 */
        selectXzqh() {
          const that = this
          that.$refs.getXzqhRef.openXzqh()
        },

        /* 行政区划选择组件回传 */
        handleGetXzqh(val) {
          const that = this
          that.newForm.xzqh = val.name
          that.newForm.xzqhm = val.code
        },

        /* 选择新线段编码 */
        selectXdbm() {
          const that = this
          that.$refs.getXdbmRef.openXdbm()
        },

        /* 线段编码组件回传 */
        handleGetXdbm(val) {
          const that = this
          that.newForm.xdbm = val[0].data.xdbm
          that.newForm.xdmc = val[0].data.xdmc
          that.newForm.xdId = val[0].data.xdid
        },

        /* 屏幕缩放 */
        onResize() {
            this.screenHeight = (document.documentElement.clientHeight || document.body.clientHeight) * 0.6
        }
    }
}
</script>
<style lang="scss" scoped>
.zczyYhChange /deep/ .el-input-number {
  width: 100%;
}
.zczyYhChange /deep/ .el-input-number .el-input__inner {
  text-align: left;
}
.zczyYhChange /deep/ .el-date-editor.el-input {
    width: 100%;
}
/deep/ .el-dialog__header {
  padding: 4px 10px 4px;
}
/deep/ .el-dialog__headerbtn {
  top: 10px;
}
/deep/.el-table--scrollable-x .el-table__body-wrapper {
  z-index: 1;
}
/deep/ .el-dialog__footer {
  padding: 5px 10px 5px;
}
.selectDwbm {
  padding-left: 10px;
}
.selectDwbm /deep/ .el-button--primary {
  width: 100%;
}    
.title {
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 24px;
}
.center {
    height: 1px;
}
/deep/ .el-dialog__body {
    padding: 10px 20px 1px;
}
/deep/ .el-scrollbar__wrap {
    overflow-y: auto;
    overflow-x: hidden;
}
// /deep/ .el-scrollbar__thumb {background: transparent;}
.zczyYhChange /deep/ .el-select {
    width: 100%;
}
.selectXzqh {
  padding-left: 10px;
}
.selectXzqh /deep/ .el-button--primary {
  width: 100%;
}
.selectXdbm {
  padding-left: 10px;
}
.selectXdbm /deep/ .el-button--primary {
  width: 100%;
}
</style>
